<!--
 * @Author: 汪军 624473119@qq.com
 * @Date: 2023-10-10 18:15:53
 * @LastEditors: 汪军 624473119@qq.com
 * @LastEditTime: 2023-10-13 09:14:58
 * @FilePath: \ekee-web\src\views\end\easy-link\EasyLink.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template lang="pug">
div.online-refund
  div.title.flex.justify-center.bold.mb4 退款
  div.form-content.flex
    div.require.w100
      el-form(
        ref="formRef"
        :model="form"
        label-position="left"
        label-width="100px"
        status-icon)
        el-form-item(label="退款图片：" prop="imageUrl")
          el-upload(
            :file-list="fileList"
            multiple
            :show-file-list="true"
            list-type="picture-card"
            action="https://api.ekee.com.cn/api/common/upload"
            :on-success="handleAvatarSuccess"
            :on-remove="handleRemove"
            :before-upload="beforeAvatarUpload"
            limit="9"
            )
            <el-icon><Plus /> </el-icon>
        el-form-item(label="退款理由：" prop="reason")
          el-input(v-model="form.reason" type="textarea",maxlength="200" :autosize="{minRows: 4, maxRows: 4}" placeholder="请输入" clearable)
  div.flex.justify-center.mt4.mb4
    el-button.btn(type="primary" size="large" plain round @click="onCancel(formRef)") 取消
    el-button.btn(type="primary" size="large" round @click="onConfirm(formRef)") 确认
</template>

<script setup>
import { onMounted, ref } from "vue";

 const props= defineProps({
  rowId: '',
});
onMounted(()=>{
  console.log('props.rowId',props.rowId);
  form.value.id=props.rowId

})

const formRef = ref();
const rules = ref({
  voucher: [
    {
      required: true,
      message: "请选择图片",
      trigger: "change",
    },
  ],
  reason: [
    {
      required: true,
      message: "请输入退款理由",
      trigger: "blur",
    },
  ]
});
const form = ref({
  id:'',
  reason: "",
  voucher: "",
});
const imgList=ref([])
const emits = defineEmits(["cancel", "confirm"]);
//移除
const handleRemove = (file) => {
  imgList.value.forEach((item, index, array) => {
    if (file.name == item.name) {
      array.splice(index, 1);
    }
  });
  console.log("删除", imgList.value);
};
//上传
const handleAvatarSuccess = (response, uploadFile) => {
  console.log("上传", response, uploadFile);
  imgList.value.push({
    name: uploadFile.name,
    path: response.data.fullurl,
  });
};

// 取消
const onCancel = (formEl) => {
  if (!formEl) return;
  formEl.resetFields();
  emits("cancel");
};

// 确认
const onConfirm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("formData.value.list", imgList.value);
      const fullurl = imgList.value.map((item) => {
        return item.path;
       });
     let fullurlInfo = fullurl.join(",");
    //图片地址
     form.value.voucher = fullurlInfo;
     console.log('地址',form.value);
       emits("confirm", form.value);
    } else {
      console.log("error submit!", fields);
    }
  });

};
</script>

<style lang="stylus" scoped>
.online-refund
  .title
    font-size: 24px;
  .form-content
    padding: 0px 66px;
    .require
      padding: 16px 12px;
      border: 1px solid #E6E6E6;
    .no-require
      margin-left: 32px;
      padding: 16px 12px;
      border: 1px solid #E6E6E6;
  .input-width
    width: 245px
  .btn
    width: 178px;
  .overdue
    color: #E84026;
  .refund
    color: #2487E8;
  .no-quota
    margin-top: 200px;
  // 上传图片相关
  .avatar-uploader .el-upload
    border: 1px dashed #dcdfe6;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  .avatar-uploader .el-upload:hover
    border-color: #dcdfe6;
  .el-icon.avatar-uploader-icon
    font-size: 28px;
    color: #8c939d;
    width: 152px;
    height: 100px;
    text-align: center;
    border: 1px dashed #dcdfe6;
  .avatar-uploader .avatar
    width: 152px;
    height: 100px;
    display: block;
</style>
    